<template>
  <div style="display: flex;">
    <!-- 左部分 -->
    <el-affix :offset="70">
      <div class="left">
        <el-card>
          <!-- 头像 & 用户名部分 -->
          <template #header>
            <div class="card-header" style="display: flex;align-items: center;flex-direction: column;"
                 @click="changeLeft">
              <el-avatar :size="100" :src="user.headImage"/>
              <el-text v-show="user.userNick!==''&&user.userNick!==null" class="title-div-text"
                       style="font-weight: bolder">
                {{ user.userNick }}
              </el-text>
            </div>
          </template>
          <!-- 菜单部分 -->
          <div>
            <el-anchor
                :container="containerRef"
                direction="vertical"
                :offset="30"
            >
              <el-anchor-link href="#part1" title="个人信息"/>
              <el-anchor-link href="#part2" title="个人介绍"/>
              <el-anchor-link href="#part3" title="期望职位"/>
              <el-anchor-link href="#part4" title="工作/实习经历"/>
              <el-anchor-link href="#part5" title="教育经历"/>
              <el-anchor-link href="#part6" title="专业技能"/>
              <el-anchor-link href="#part7" title="获奖记录"/>
            </el-anchor>
          </div>
        </el-card>
      </div>
    </el-affix>
    <!-- 右部分 -->
    <div class="right">
      <el-card>
        <!--    <el-card style="width:720px;padding: 30px; margin: 30px 200px 30px 50px;min-height: calc(100vh - 125px); ">-->
        <template id="part1" style="display: flex">
          <div style="width: 60%;float: left; display: flex;flex-direction: column">
            <div style="margin: 20px 0;">
              <el-text>真实姓名：</el-text>
              <el-text v-if="user.name!==''&&user.name!== null" class="title-div-text" style="font-weight: bolder">
                {{ user.name }}
              </el-text>
              <el-text v-else>暂未填写</el-text>
            </div>
            <div class="one-row" style="display: flex">
              <el-text class="text-item">
                <el-icon>
                  <Calendar/>
                </el-icon>
                {{ birth }}
              </el-text>
              <el-text class="text-item">
                <el-icon>
                  <User/>
                </el-icon>
                {{ user.gender }}
              </el-text>
              <el-text class="text-item">
                <el-icon>
                  <Position/>
                </el-icon>
                {{ resume.politicalStatus }}
              </el-text>
              <el-text v-show="user.idCard!==''&&user.idCard!==null" class="text-item">
                <el-icon>
                  <Postcard/>
                </el-icon>
                {{ user.idCard }}
              </el-text>
            </div>
            <div class="one-row" style="display: flex">
              <el-text v-show="resume.graduateTime!==null" class="text-item">
                <el-icon>
                  <Suitcase/>
                </el-icon>
                {{ graduateTime }}届毕业生
              </el-text>
              <el-text class="text-item">
                <el-icon>
                  <Reading/>
                </el-icon>
                {{ resume.eduBackground }}
              </el-text>
              <el-text class="text-item">
                <el-icon>
                  <PriceTag/>
                </el-icon>
                {{ user.status }}
              </el-text>
            </div>
            <div class="one-row" style="display: flex">
              <el-text class="text-item">
                <el-icon>
                  <Phone/>
                </el-icon>
                {{ user.phone }}
              </el-text>
              <el-text class="text-item">
                <el-icon>
                  <Message/>
                </el-icon>
                {{ user.email }}
              </el-text>
              <el-text class="text-item">
                <el-icon>
                  <Place/>
                </el-icon>
                {{ user.address }}
              </el-text>
            </div>
          </div>
          <div style="width: 30%;padding-top: 20px">
            <el-image v-if="resume.userImage!==''&&resume.userImage!==null" :src="resume.userImage"
                      style="height: 120px;width: 90px"/>
            <el-image v-else style="height: 120px;width: 90px"/>
          </div>
          <div style="width: 10%;float: right">
            <el-button class="button-item" text @click="editInfo">
              <el-icon>
                <Edit/>
              </el-icon>
              &nbsp编辑
            </el-button>
          </div>
        </template>

        <template id="part2" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              个人介绍
            </el-text>
            <el-button class="button-item" text
                       @click="textareaDialog=true;editIndex=0;resume.introduce===null?1:textarea=resume.introduce">
              <el-icon>
                <Edit/>
              </el-icon>
              &nbsp编辑
            </el-button>
          </div>
          <div class="one-row">
            <el-text style="white-space: pre-wrap;">{{ resume.introduce }}</el-text>
          </div>
        </template>

        <template id="part3" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              期望职位
            </el-text>
            <el-text style="color: #8c939d;font-size: 14px;">填写期望职位后可查看能力评价</el-text>
            <el-button class="button-item" text @click="editExpectJob">
              <el-icon>
                <Edit/>
              </el-icon>
              &nbsp编辑
            </el-button>
          </div>
          <div class="one-row" style="display: flex">
            <el-text class="text-item">
              <el-icon>
                <Position/>
              </el-icon>
              {{ resume.expectPosition }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Coin/>
              </el-icon>
              {{ resume.expectSalary }}
            </el-text>
          </div>

          <div v-show="resume.expectPosition!==null&&resume.expectPosition!==''">
            <el-button plain type="primary" @click="gapDialog=true">
              能力评价
            </el-button>
          </div>
        </template>

        <template id="part4" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              工作/实习经历
            </el-text>
            <el-button class="button-item" text
                       @click="textareaDialog=true;editIndex=1;resume.workExperience===null?1:textarea=resume.workExperience">
              <el-icon>
                <Edit/>
              </el-icon>
              &nbsp编辑
            </el-button>
          </div>
          <div class="one-row">
            <el-text style="white-space: pre-wrap;">{{ resume.workExperience }}</el-text>
          </div>
        </template>

        <template id="part5" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              教育经历
            </el-text>
            <el-button class="button-item" text @click="editEducational">
              <el-icon>
                <Edit/>
              </el-icon>
              &nbsp编辑
            </el-button>
          </div>
          <div class="one-row" style="display: flex">
            <el-text style="font-weight: bolder; margin-right: 20px">
              <el-icon>
                <School/>
              </el-icon>
              {{ resume.graduateSchool }}
            </el-text>
            <el-text>
              <el-icon>
                <Brush/>
              </el-icon>
              {{ resume.major }}
            </el-text>
            <el-text v-show="resume.eduBackground!==null">（{{ resume.eduBackground }}）</el-text>
          </div>
        </template>

        <template id="part6" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              专业技能
            </el-text>
            <el-button class="button-item" text @click="skillDialog=true;">
              <el-icon>
                <Edit/>
              </el-icon>
              &nbsp编辑
            </el-button>
          </div>
          <div v-show="skillTagForm.length>0" class="one-row" style="display: flex">
            <el-tag v-for="item in skillTagForm" key="item" style="margin-right: 10px">
              {{ item }}
            </el-tag>
          </div>
        </template>

        <template id="part7" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              获奖记录
            </el-text>
            <el-button class="button-item" text
                       @click="textareaDialog=true;editIndex=2;resume.rewards===null?1:textarea=resume.rewards">
              <el-icon>
                <Edit/>
              </el-icon>
              &nbsp编辑
            </el-button>
          </div>
          <div class="one-row">
            <el-text style="white-space: pre-wrap;">{{ resume.rewards }}</el-text>
          </div>
        </template>
      </el-card>
    </div>
    <div>
      <!-- 弹窗  修改个人基本信息 -->
      <el-dialog
          class="el-dialog"
          v-model="messageDialog"
          title="个人信息修改"
          :lock-scroll="false"
          :append-to-body="true"
          :close-on-click-modal="false"
          style="display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow-y: scroll !important;
  max-height: 99vh !important;"
      >
        <el-form :model="infoForm" label-width="auto">
          <el-form-item label="证件照">
            <el-upload
                :before-upload="beforeAvatarUpload"
                :on-error="handleAvatarError"
                :on-success="response => handleAvatarSuccess(response,'image')"
                :show-file-list="false"
                action="http://localhost:60000/user/api/v1/upload"
                class="avatar-uploader"
                style="display: block;margin: 0 auto;width: 100px;height: 100px"
            >
              <el-image v-if="infoForm.userImage" :src="infoForm.userImage" style="height: 100px;width: 75px"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
            <!--            <el-image :src="infoForm.headImage" style="width: 100px;display:block;margin:0 auto"></el-image>-->
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="infoForm.name"/>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="infoForm.idCard"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="infoForm.gender">
              <el-radio value="女">女</el-radio>
              <el-radio value="男">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
                v-model="infoForm.birth"
                type="date"
                placeholder="请选择一个日期"
                style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="毕业时间">
            <el-date-picker
                v-model="infoForm.graduateTime"
                placeholder="请选择一个日期"
                style="width: 100%"
                type="date"
            />
          </el-form-item>
          <el-form-item label="政治面貌">
            <el-input v-model="infoForm.politicalStatus"/>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="infoForm.eduBackground"/>
          </el-form-item>
          <el-form-item label="身份">
            <el-select v-model="infoForm.status">
              <el-option label="在校生" value="在校生"/>
              <el-option label="应届生" value="应届生"/>
              <el-option label="职场人士" value="职场人士"/>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="infoForm.phone"/>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="infoForm.email"/>
          </el-form-item>
          <el-form-item label="通讯地址">
            <el-input v-model="infoForm.address" type="textarea"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="messageDialog = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 弹窗  修改文本 0-个人介绍  1-工作经历  2-获奖记录 -->
      <el-dialog
          class="el-dialog"
          v-model="textareaDialog"
          :title="editTitle[editIndex].title"
          :lock-scroll="false"
          :append-to-body="true"
          :close-on-click-modal="false"
      >
        <el-text style="color: #c0c4cc">{{ editTitle[editIndex].text }}</el-text>
        <el-input
            v-model="textarea"
            style="width: 500px; margin: 10px 0 0 20px"
            :rows="20"
            type="textarea"
        />
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="textareaDialog = false">取消</el-button>
            <el-button type="primary" @click="onSubmitTextarea">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 弹窗  修改期望职位 -->
      <el-dialog
          class="el-dialog"
          v-model="expectJobDialog"
          title="期望职位"
          :lock-scroll="false"
          :append-to-body="true"
          :close-on-click-modal="false"
          style="max-width: 500px"
      >
        <el-form :model="expectForm">
          <el-form-item label="期望职位">
            <el-input v-model="expectForm.job"/>
          </el-form-item>
          <el-form-item>
            <el-radio-group v-model="expectForm.salaryType">
              <el-radio label="不限薪资">不限薪资</el-radio>
              <el-radio label="固定薪资">固定薪资</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="expectForm.salaryType === '固定薪资'" label="薪资" style="display: flex">
            <el-col :span="6" style="display: flex">
              <el-input v-model="expectForm.min_salary" type="number" :min="0" :step="1" placeholder="请输入整数"/>
              &nbsp&nbspk
            </el-col>
            <el-col :span="2" class="text-center" style="display: flex; justify-content: center; align-items: center;">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="6" style="display:flex;">
              <el-input v-model="expectForm.max_salary" type="number" :min="0" :step="1" placeholder="请输入整数"/>
              &nbsp&nbspk
            </el-col>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="expectJobDialog = false">取消</el-button>
            <el-button type="primary" @click="onSubmitExpectJob">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 弹窗  修改教育经历 -->
      <el-dialog
          class="el-dialog"
          v-model="educationalDialog"
          title="教育经历"
          :lock-scroll="false"
          :append-to-body="true"
          :close-on-click-modal="false"
          style="max-width: 500px"
      >
        <el-form :model="eduForm">
          <el-form-item label="毕业院校">
            <el-input v-model="eduForm.school"/>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="eduForm.major"/>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="eduForm.background"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="educationalDialog = false">取消</el-button>
            <el-button type="primary" @click="onSubmitEducation">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 弹窗  修改专业技能 -->
      <el-dialog
          class="el-dialog"
          v-model="skillDialog"
          title="专业技能"
          :lock-scroll="false"
          :append-to-body="true"
          :close-on-click-modal="false"
          style="max-width: 500px"
      >
        <div style="display: flex;flex-wrap: wrap;">
          <el-tag
              v-for="tag in skillTagForm"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
              style="margin-right: 10px"
          >
            {{ tag }}
          </el-tag>
          <el-input
              v-if="addSkillInputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="w-20"
              size="small"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
              style="max-width: 100px"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">
            + 新技能标签
          </el-button>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="skillDialog = false">取消</el-button>
            <el-button type="primary" @click="onSubmitSkill">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 弹窗  修改头像、昵称 -->
      <el-dialog
          v-model="leftDialog"
          :append-to-body="true"
          :close-on-click-modal="false"
          :lock-scroll="false"
          class="el-dialog"
          style="display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow-y: scroll !important;
  max-height: 99vh !important;"
          title="信息修改"
      >
        <el-form :model="leftInform" label-width="auto">
          <el-form-item label="头像">
            <el-upload
                :before-upload="beforeAvatarUpload"
                :on-error="handleAvatarError"
                :on-success="response => handleAvatarSuccess(response,'head')"
                :show-file-list="false"
                action="http://localhost:60000/user/api/v1/upload"
                class="avatar-uploader"
                style="display: block;margin: 0 auto;width: 100px;height: 100px"
            >
              <el-avatar v-if="leftInform.headImage" :size="100" :src="leftInform.headImage"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
            <!--            <el-image :src="leftInform.headImage" style="width: 100px;display:block;margin:0 auto"></el-image>-->
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="leftInform.userNick"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="leftDialog = false">取消</el-button>
            <el-button type="primary" @click="onSubmitLeft">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 弹窗  查看差距 -->
      <el-dialog
          v-model="gapDialog"
          :append-to-body="true"
          :close-on-click-modal="false"
          :lock-scroll="false"
          class="el-dialog"
          style="display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow-y: scroll !important;
  max-height: 99vh !important;"
          title="能力评价"
      >
        <div class="one-row">
          <el-text size="large">契合度：43.3%</el-text>
        </div>
        <div class="one-row">
          <el-text size="large">缺少的技能知识：</el-text>
            <el-tag style="margin-right: 10px">javascript</el-tag>
            <el-tag style="margin-right: 10px">css</el-tag>
            <el-tag style="margin-right: 10px">HTML</el-tag>
        </div>
        <div class="one-row">
          <el-text size="large">提升建议：学习javascript、css、HTML技能，以提升自身竞争力</el-text>
        </div>
        <div class="one-row">
          <el-text size="large">平均薪资：8.5k</el-text>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, nextTick} from "vue";
import {ElMessage} from 'element-plus'
import axios from "axios";
import {
  Message, Plus, Calendar, User,
  Position, Postcard, Suitcase, Reading,
  PriceTag, Phone, Place, Coin, Brush, School, Edit
} from "@element-plus/icons-vue";
import {seekerApi} from "../../api/app";

const containerRef = ref(null)
const messageDialog = ref(false)
const expectJobDialog = ref(false)
const skillDialog = ref(false)
const textareaDialog = ref(false)
const textarea = ref('')
const editIndex = ref(0)
const skillTagForm = ref([])
const addSkillInputVisible = ref(false)
const inputValue = ref('')
const InputRef = ref(null)
const graduateTime = ref('')
const birth = ref('')
const educationalDialog = ref(false)
const eduForm = ref({
  school: "",
  major: "",
  background: ""
})

const editTitle = [
  {title: "个人介绍", text: "例如：热爱美术，有两年ui设计经理，熟悉IOS和Android的界面设计规范，有一定手绘基础。"},
  {title: "工作经历", text: "例如：在XXX公司产品部工作（实习）两年，主要负责新员工入职培训、指定员工每月个人销售业绩表等。"},
  {title: "获奖记录", text: "例如：获得2021年全国大学生程序设计大赛一等奖。"}
]
const expectForm = ref({
  job: "",
  salaryType: "不限薪资",
  min_salary: 0,
  max_salary: 0
})

const infoForm = ref()

const user = ref(
    {
      id: "",
      userNick: '',
      password: "",
      name: '',
      gender: '',
      birth: null,
      phone: "",
      email: '',
      status: '',
      address: '',
      idCard: '',
      headImage: ''
    }
)
const resume = ref(
    {
      id: null,
      userId: user.value.id,
      name: user.value.name,
      gender: user.value.gender,
      birth: user.value.birth,
      phone: user.value.phone,
      email: user.value.email,
      politicalStatus: null,
      eduBackground: null,
      graduateSchool: null,
      graduateTime: null,
      major: null,
      skill: null,
      workExperience: '',
      rewards: '',
      expectPosition: null,
      expectSalary: null,
      introduce: '',
      userImage: null
    }
)

onMounted(() => {
  getData()
  getResume()
})

const getData = () => {
  const id1 = JSON.parse(localStorage.getItem('seeker')).id
  console.log(id1)
  seekerApi.getSelfMessage({id: id1})
      .then((res) => {
        console.log(res)
        user.value = res.data
        console.log(user.value)
        // 存为全局变量
        localStorage.setItem(
            'seeker',
            JSON.stringify(res.data)
        )
        user.value.idCard = user.value.idCard.substr(0, 3) + '*************' + user.value.idCard.substr(16);
      })
      .catch((error) => {
        console.log(error)
      })
}

const getResume = () => {
  const userId = JSON.parse(localStorage.getItem('seeker')).id
  seekerApi.getSelfResume({userId: userId})
      .then((res) => {
        console.log(res)
        resume.value = res.data[0]
        if (resume.value.skill !== null && resume.value.skill !== '') {
          //分割字符串
          let s = resume.value.skill
          skillTagForm.value = s.split(',')
          console.log(skillTagForm.value)
        }
        if (resume.value.graduateTime !== null && resume.value.graduateTime !== '') {
          let s = resume.value.graduateTime
          graduateTime.value = s.split('-')[0]
        }
        if (resume.value.birth !== null && resume.value.birth !== '') {
          let s = resume.value.birth
          birth.value = s.split('T')[0]
        }
      })
      .catch((error) => {
        console.log(error)
      })
}

const editInfo = () => {
  infoForm.value = {
    headImage: user.value.headImage,
    userNick: user.value.userNick,
    name: user.value.name,
    gender: user.value.gender,
    birth: user.value.birth,
    graduateTime: resume.value.graduateTime,
    eduBackground: resume.value.eduBackground,
    status: user.value.status,
    address: user.value.address,
    email: user.value.email,
    phone: user.value.phone,
    politicalStatus: resume.value.politicalStatus,
    // idCard: user.value.idCard,
    userImage: resume.value.userImage
  }
  messageDialog.value = true
}

const onSubmit = () => {
  user.value.name = infoForm.value.name
  // user.value.userNick = infoForm.value.userNick
  user.value.gender = infoForm.value.gender
  user.value.birth = infoForm.value.birth
  resume.value.graduateTime = infoForm.value.graduateTime
  resume.value.eduBackground = infoForm.value.eduBackground
  user.value.status = infoForm.value.status
  user.value.address = infoForm.value.address
  user.value.email = infoForm.value.email
  user.value.headImage = infoForm.value.headImage
  user.value.phone = infoForm.value.phone
  resume.value.politicalStatus = infoForm.value.politicalStatus
  resume.value.userImage = infoForm.value.userImage
  user.value.idCard = infoForm.value.idCard
  changeUser()
  if (resume.value.id === null) {
    addResume()
  } else {
    changeResume()
  }
  messageDialog.value = false
}

const onSubmitTextarea = () => {
  if (editIndex.value === 0) {//修改个人介绍
    resume.value.introduce = textarea.value
  } else if (editIndex.value === 1) { //修改工作经历
    resume.value.workExperience = textarea.value
  } else {//修改获奖记录
    resume.value.rewards = textarea.value
  }
  if (resume.value.id === null) {
    addResume()
  } else {
    changeResume()
  }
  textareaDialog.value = false
}

//修改期待职位
const editExpectJob = () => {
  expectForm.value.job = resume.value.expectPosition
  console.log(resume.value.expectSalary)
  if (resume.value.expectSalary !== '' && resume.value.expectSalary !== null && resume.value.expectSalary !== "不限薪资") {
    expectForm.value.salaryType = "固定薪资"
    let s = resume.value.expectSalary
    let ss = s.split('-')
    expectForm.value.min_salary = Number(ss[0])
    expectForm.value.max_salary = Number(ss[1].split('k')[0])
  }
  expectJobDialog.value = true;
}

const onSubmitExpectJob = () => {
  resume.value.expectPosition = expectForm.value.job
  if (resume.value.expectSalary !== expectForm.value.salaryType) {
    if (expectForm.value.salaryType === "不限薪资") resume.value.expectSalary = expectForm.value.salaryType
    else {
      let s = expectForm.value.min_salary + "-" + expectForm.value.max_salary + "k"
      resume.value.expectSalary = s
    }
  }
  if (resume.value.id === null) {
    addResume()
  } else {
    changeResume()
  }
  expectJobDialog.value = false
}


//编辑教育经历
const editEducational = () => {
  eduForm.value.school = resume.value.graduateSchool
  eduForm.value.major = resume.value.major
  eduForm.value.background = resume.value.eduBackground
  educationalDialog.value = true
}
const onSubmitEducation = () => {
  resume.value.graduateSchool = eduForm.value.school
  resume.value.major = eduForm.value.major
  resume.value.eduBackground = eduForm.value.background
  if (resume.value.id === null) {
    addResume()
  } else {
    changeResume()
  }
  educationalDialog.value = false
}

//修改技能标签
const handleClose = (tag) => {
  skillTagForm.value.splice(skillTagForm.value.indexOf(tag), 1)
}
const showInput = () => {
  addSkillInputVisible.value = true
  nextTick(() => {
    InputRef.value.input.focus()
  })
}
const handleInputConfirm = () => {
  if (inputValue.value) {
    skillTagForm.value.push(inputValue.value);
  }
  addSkillInputVisible.value = false;
  inputValue.value = '';
}
const onSubmitSkill = () => {
  let s = ""
  for (let i = 0; i < skillTagForm.value.length; i++) {
    if (i === 0) s = skillTagForm.value[i]
    else s = s + ',' + skillTagForm.value[i]
  }
  console.log(skillTagForm.value)
  console.log(s)
  resume.value.skill = s
  if (resume.value.id === null) {
    addResume()
  } else {
    changeResume()
  }
  skillDialog.value = false
}

const addResume = () => {
  seekerApi.insertResume({
    userId: user.value.id,
    name: user.value.name,
    gender: user.value.gender,
    birth: user.value.birth,
    phone: user.value.phone,
    email: user.value.email,
    politicalStatus: resume.value.politicalStatus,
    eduBackground: resume.value.eduBackground,
    graduateSchool: resume.value.graduateSchool,
    graduateTime: resume.value.graduateTime,
    major: resume.value.major,
    skill: resume.value.skill,
    workExperience: resume.value.workExperience,
    rewards: resume.value.rewards,
    expectPosition: resume.value.expectPosition,
    expectSalary: resume.value.expectSalary,
    introduce: resume.value.introduce,
    userImage: resume.value.userImage
  })
      .then((reponse) => {
        console.log(reponse)
        if (reponse.code === 200) {
          getResume()
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        } else {
          ElMessage.error('修改失败')
        }
      })
      .catch((error) => {
        console.log(error)
      })
}
const changeResume = () => {
  console.log(user)
  console.log(resume)
  seekerApi.updateResume({
    id: resume.value.id,
    userId: user.value.id,
    name: user.value.name,
    gender: user.value.gender,
    birth: user.value.birth,
    phone: user.value.phone,
    email: user.value.email,
    politicalStatus: resume.value.politicalStatus,
    eduBackground: resume.value.eduBackground,
    graduateSchool: resume.value.graduateSchool,
    graduateTime: resume.value.graduateTime,
    major: resume.value.major,
    skill: resume.value.skill,
    workExperience: resume.value.workExperience,
    rewards: resume.value.rewards,
    expectPosition: resume.value.expectPosition,
    expectSalary: resume.value.expectSalary,
    introduce: resume.value.introduce,
    userImage: resume.value.userImage
  })
      .then((reponse) => {
        console.log(reponse)
        if (reponse.code === 200) {
          getResume()
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        } else {
          ElMessage.error('修改失败')
        }
      })
      .catch((error) => {
        console.log(error)
      })
}
const changeUser = () => {
  seekerApi.updateUser({
    id: user.value.id,
    userNick: user.value.userNick,
    name: user.value.name,
    gender: user.value.gender,
    birth: user.value.birth,
    phone: user.value.phone,
    email: user.value.email,
    status: user.value.status,
    address: user.value.address,
    idCard: user.value.idCard,
    headImage: user.value.headImage
  })
      .then((reponse) => {
        console.log("修改后返回信息：", reponse)
        if (reponse.code === 200) {
          getData()
          // localStorage.setItem()
          // 更新其他页面
          window.dispatchEvent(new CustomEvent('changeImage', {detail: user.value.headImage}));
          window.dispatchEvent(new CustomEvent('changeUserNick', {detail: user.value.userNick}));
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        } else {
          ElMessage.error('修改失败')
        }
      })
      .catch((error) => {
        console.log(error)
      })
}

// 头像上传
// 上传成功
const handleAvatarSuccess = (response, type) => {
  console.log(response, type);
  if (type === 'head') {
    leftInform.value.headImage = response;
  } else if (type === 'image') {
    infoForm.value.userImage = response;
  }
}
// 上传失败
const handleAvatarError = (err, file, fileList) => {
  // 提示成功
  ElMessage({
    message: '修改失败！',
    type: 'error',
  });
}
// 上传图片前的格式校验
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

//上传左侧的东西
const leftDialog = ref(false)
const leftInform = ref({
  headImage: '',
  userNick: ''
})
const changeLeft = () => {
  leftInform.value.headImage = user.value.headImage
  leftInform.value.userNick = user.value.userNick
  leftDialog.value = true
}
const onSubmitLeft = () => {
  user.value.userNick = leftInform.value.userNick
  user.value.headImage = leftInform.value.headImage
  changeUser()
  leftDialog.value = false
}

//查看与期待职位的差距
const gapDialog = ref(false)
</script>

<style scoped>
.left, .right {
  background-color: #FFFFFF;
  margin: 20px 0 20px 200px;
}

.left {
  width: 200px;
}

.right {
  margin: 30px 200px 30px 50px;
  flex: 1;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 0 4px 4px #e4e7ed;
  min-height: calc(100vh - 125px);
}

.title-div {
  border-left: 5px solid #00ab6d;
  margin: 25px 0 15px 0;
}

.title-div-text {
  margin-left: 10px;
  font-size: 20px;
  color: black;
}

.button-item {
  float: right;
  color: #00ab6d;
  margin-left: 10px;
}

.text-item {
  margin-right: 20px;
}

.one-row {
  margin-bottom: 10px;
}
</style>
